<template>
  <view>
    <!-- <view class="title-box">
      <view class="left-title-box">选择送货时间</view>
      <view class="left-title-box right-title-box">订单中包含大件限行商品。仅支持凌晨配送</view>
    </view> -->
    <view class="content-box">
      <LeftNav
        :nav-list="leftSelectDate"

        :nav-tab-cur="navTabCur"
        :bottom-station="false"
        :nav-whith="220"
        :bg-active="'#fff'"
        :bg-default="'#f5f5f5'"
        :show-key="'label'"
        :swiper-height="352"
        @leftNavFn="leftNavFn"
      />
      <scroll-view
        class="right-content"
        :scroll-y="true"
        :scroll-with-animation="true"
        :enable-back-to-top="true"
        :style="'width:calc(100% - 220rpx);max-height:704rpx;float:left;'"
      >

        <view v-if="navTabCur == 1" class="item-content clearfix">

          <view
            v-for="(item, index) in leftSelectDate[currentIndex].timeSlotArray"
            :key="index"
            class="class-item"
            :class="[item.rightStatsus ==1&&leftSelectDate[currentIndex].holidayFlag ==0? 'class-item-select class-item' : 'class-item',item.enable ==0?'class-item-gury':'' ]"
            @click="selectItemFn(index,item.enable)"
          >
            {{ item.timeSlotStr }}
          </view>
        </view>
        <view v-else class="item-content clearfix">

          <view
            v-for="(item, index) in leftSelectDate[currentIndex].timeSlotArray"
            :key="index"
            :class="[item.rightStatsus ==1? 'class-item-select class-item' : 'class-item',item.enable ==0?'class-item-gury':'']"
            @click="selectItemFn(index,item.enable)"
          >
            {{ item.timeSlotStr }}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import LeftNav from './select-left-nav'
export default {
  name: 'SelectDeliverWayTime',
  components: {
    LeftNav,
  },
  props: {
    deliverTimeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    listData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // navTabCur == 1 仅工作日 0==任何时间
    navTabCur: {
      type: Number,
      default: 0
    }

  },
  data() {
    return {
      curHour: 0,
      leftSelectDate: [], // 左侧数据集合
      lastSelectTime: {}, //最后选择的时间集合
      newListData: {},
      deliveryDate: '',
      deliveryTime: '',
      currentIndex: 0
    }
  },
  computed: {
    coumtedListData() { // props 传过来的值 放在 computed里 才能监听点击物流tab时 需要监听最新的数据用来渲染页面
      return this.listData
    }
  },
  watch: {
    coumtedListData: {
      handler(newVal, oldVal) {
        if (newVal.deliveryDate) {
          const { deliveryDate, deliveryTime } = newVal
          this.newListData = newVal
          this.deliveryDate = deliveryDate
          this.deliveryTime = deliveryTime
          this.initLeftStatus(deliveryDate, deliveryTime)
        }
      },
      deep: true
    }
  },
  mounted() {
    const { deliveryDate, deliveryTime } = this.listData
    console.log('需要回显选中的', this.listData)
    this.deliveryDate = deliveryDate
    this.deliveryTime = deliveryTime
    this.newListData = this.listData
    this.initLeftStatus(deliveryDate, deliveryTime) // 初始化进入 调取左侧的数据根据后台接口已选日期来判断选中的日期 及右侧选中的时间段
  },
  methods: {
    leftNavFn(val, activeId) {
      console.log('左侧选中')
      if (val.holidayFlag == 1 && this.navTabCur == 1) { //holidayFlag ==1 不可选 只有tab navTabCur = 1点击为仅工作日的时候不可选置灰
        return
      }
      this.initLeftStatus(val.dateStr, this.deliveryTime) //点击左侧日期
      this.currentIndex = activeId// 点击左侧日期时 当前被选中的日期等于选中的index
    },
    initLeftStatus(deliveryDate, deliveryTime) {
      this.lastSelectTime.changeDate = deliveryDate //初始化默认的数据
      this.lastSelectTime.changeTime = deliveryTime //初始化默认的数据

      this.leftSelectDate = this.newListData.selectDate.map((item, index) => {
        let leftStatsus = 0 //此变量用于计算左侧选中 1代表选中 =====此值是前端自定义
        let timeSlotArray = []
        if (item.dateStr == deliveryDate) {
          leftStatsus = 1
          this.lastSelectTime.changeDate = item.dateStr
          this.currentIndex = index
          timeSlotArray = this.rightList(item, deliveryTime) //重新组装数据 数据中添加了右侧时间段  被选中的状态值
        } else {
          timeSlotArray = this.rightList(item)
          leftStatsus = 0
        }

        return { ...item, leftStatsus, timeSlotArray } //这是最后组装的数据用来渲染页面
      });
    },
    rightList(item, deliveryTime) {
      console.log('当前选中的', item, deliveryTime)
      const rightData = [];
      let rightStatsus = 0; // 此变量用于计算右侧已选中的 1代表已选中  =====此值是前端自定义
      item?.timeSlotArray.forEach((ite, i) => {
        if (ite.timeSlotStr == deliveryTime && item.dateStr == this.deliveryDate) {
          rightStatsus = 1
        } else {
          rightStatsus = 0
        }

        rightData.push({ ...ite, rightStatsus })
      });
      return rightData
    },
    /*选择按钮方法*/
    selectItemFn(index, enable) {
      if (enable == 0) { //是否可用 1: 可选，0:不可选
        return
      }
      console.log(this.leftSelectDate, this.currentIndex);
      this.leftSelectDate[this.currentIndex].timeSlotArray.forEach((item, i) => {
        if (i == index) {
          this.lastSelectTime.changeTime = item.timeSlotStr
          item.rightStatsus = 1 //选中
        } else {
          item.rightStatsus = 0
        }
      })
      console.log(this.lastSelectTime);
      // this[typeName] = val
      this.$emit('checkTime', { ...this.lastSelectTime })
    },
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.content-box{
  margin-top: 24rpx;
  .class-item{
    width: 216rpx;
    padding: 0 0;
    text-align: center;
    margin: 0 0 16rpx 16rpx;
  }
  .class-item-select{
    padding: 0 0;
    text-align: center;
    width: 212rpx;
  }
  .class-item-gury{
    background: #ccc;
  }
}
.disabled-btn{
  color: #fff;
  background: $uni-text-color-disable!important;
}
</style>
